<template>
	<div class="">
		<loading v-if="isloading"></loading>
		<!--<base-header></base-header>-->
		<div class="brace-bg"></div>
		<div class="brace-main">
			<div class="brace-main-list-head">
				<div>您已经与牙套君紧密接触</div>
				<div>
					<span class="all-day">{{total_days}}</span>
					<span>天</span>
				</div>
			</div>
			<div class="brace-main-mid">
				<div class="brace-main-mid-sorll">
					<div class="brace-mid-time">
						<span>{{steps_days}}天</span>
					</div>
					<div class="brace-mid-map">					
						<div><span></span></div>
						<div v-for="step in step_list" @click="select(step.step_number)" :class="{selected: step.step_number == steps}">
							<span class="cell" v-bind:style="{ height: 170/steps_days*(step.plan_day_count>steps_days?steps_days:step.plan_day_count) + 'px' }"></span>
							<span class="time"></span>
						</div>
						<!--<div class="addtime">
						<i class="fa fa-plus"></i>
					</div>-->
					</div>
					<div class="brace-mid-day">
						<span>步数</span>
						<span v-for="step in step_list">{{step.step_number}}</span>
						<div class="clearfix">

						</div>
					</div>
				</div>
			</div>
			<div v-for="step in step_list" v-if="step.step_number == steps" class="brace-main-foot">
				<div class="brace-main-foot-div">
					<div class="">
						{{step.begin_date?step.begin_date:0}} - {{step.end_date?step.end_date:0}}
					</div>
					<div class="">
						第{{step.step_number}}步牙套 | 共佩戴{{step.hour_total}}小时
					</div>
				</div>
				<div class="">
					<span @click="jump(step.step_number)" class="change-brace-time">查看</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	import Loading from "@/components/common/Loading"
	export default {
		name: 'BraceTimeList',
		components: {
			BaseHeader,
			Loading
		},
		data() {
			return {
				uid: '',
				token: '',
				pid: '',
				steps: '',
				steps_days: '',
				total_days: '',
				step_list: [],
				isloading: true
			}
		},
		mounted() {
			this.pid = this.$route.params.pid;
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
			this.getPlan();
			this.getPlanD();
		},
		methods: {
			//查看每一步详情
			jump(step) {
				var pName = localStorage.getItem('pname');
				this.$router.push({
					path: '/brace_home',
					query: {
						step: step,
						pName: pName
					}
				});
			},
			//选择步数
			select(i) {
				this.steps = i;
			},
			//获取牙套计划
			getPlan() {
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token,
					plan_id: self.pid
				};
				$.post(global.domain + global.API.braces_plan_info, data, function(msg) {
					if(msg.error == 0) {
						self.steps_days = msg.braces_plan.steps_days;
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
			//获取牙套计划详情
			getPlanD() {
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token,
					plan_id: self.pid
				};
				$.post(global.domain + global.API.braces_plan_details, data, function(msg) {
					self.isloading = false;
					if(msg.error == 0) {
						self.total_days = msg.total_days;
						self.step_list = msg.data;
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/brace.css";
	.brace-main-list-head {
		border-bottom: 1px solid #CCCCCC;
		text-align: center;
		font-size: 22px;
		padding-bottom: 65px;
		margin-bottom: 45px;
	}
	
	.all-day {
		font-size: 36px;
		font-weight: bold;
	}
	
	.brace-mid-time span:first-child {
		width: 34px;
	}
	
	.time {
		bottom: -19px;
	}
	
	.loading {
		line-height: 170px;
	}
	
	.loading-img {
		width: 20px;
	}
</style>